
<body>

    <div class="warp h">
        <!--header-->
        <header class="hd br">
            <a href="<?php echo $base_url?>home/account/myInfo" class="l-icon only-icon">
            <i class="iconfont icon-left1"></i>      
        </a>
            <p class="tit2">
                绑定银行卡
            </p>
        </header>
        <ul class="msg-bar">
            <li>
                <span class="l">持卡人</span>
                <input type="text" id='username' placeholder="请输入持卡人的姓名" class="input_txt">
            </li>
            <li>
                <span class="l">银行卡号</span>
                <input type="text" class="input_txt" id='card' placeholder="请输入卡号" max='19' min="16">
            </li>
            <li>
                <a href="#" class="sel_1">
                    <span class="l">所属银行</span>
                    <span class="r"><span class="txt">请选择</span> <i class=" iconfont icon-left"></i></span>
                </a>
            </li>
            <li class="province" >
                <a href="#" class="sel_2">
                    <span class="l">开户省份</span>                    
					<span class="r"  id='province_name'><span class="txt">请选择</span> <i class=" iconfont icon-left"></i></span>
                     <!--    <i class=" iconfont icon-left"></i> -->
                </a>
            </li>
            <li>
                <a href="#" class="sel_3">
                    <span class="l">开户市</span>                       
					<span class="r"  id='city_name'><span class="txt">请选择</span> <i class=" iconfont icon-left"></i></span>
                </a>
            </li>
            <li>
                <a href="#" class="sel_4">
                    <span class="l"  style="width:0.8rem">支行</span>                    
					<span class="r"  id='subbranch_name'><span class="txt">
            若找不到支行请选择市分行或分行营业部
        </span> <i class=" iconfont icon-left"></i></span>
					
                </a>
            </li>
        </ul>
        <!--<p class="card-msg-1">
            若找不到支行请选择市分行或分行营业部
        </p>-->
        <a href="javascript:;" class="save-btn" id='save-btn'>
            保存
        </a>
        <p class="card-msg-2">
            *此银行卡作为您的返钱账户
        </p>
        <div class="line-box"></div>
        <div class="pd-box"></div>
    </div>
    <script src="<?php echo $base_url?>static/dist/js/base.js"></script>
    <script src="<?php echo $base_url?>static/js/common.js"></script>
	<script src="<?php echo $base_url; ?>static/dist/js/lib/picker.min.js"></script>
    <script>
        // 矫正rem
        function correctrem() {
            var rem_full_width = $("<div id='rem-test' style='width:7.5rem'></div>").appendTo($('body')).width();
            var device_width = Math.min(document.documentElement.clientWidth, 640);
            if (rem_full_width !== device_width) {
                document.documentElement.style.fontSize = (device_width / 7.5) * (device_width / rem_full_width) + 'px';
            }
            $('#rem-test').remove();
        }
        correctrem();

		var bank_data =[<?php foreach ($banklist as $k => $v) :?>
		{value :"<?php echo $v['bankcode']?>",text: "<?php echo $v['banktypename']?>"},
		<?php endforeach;?>]	;
		
		var picker = new Picker({
			data: [bank_data],
			selectedIndex: [0],
			// title: '地址选择'
		});	
		
		var picker2=null,picker3=null,picker4=null;
		var picker2_data=[],picker3_data=[],picker4_data=[];
		$('.sel_1').on('click',function(){
			picker.show();
		})
		picker.on('picker.select', function (selectedVal, selectedIndex) {			
			var bankcode = selectedVal[0];
			var htmlStr = bank_data[selectedIndex].text;
			$('.sel_1').find('.r').html(htmlStr + ' <i class=" iconfont icon-left"></i>')
			$('.sel_1').data('val',bankcode)
			$.ajax({
                url:"<?php echo $base_url?>home/card/getprovince",
                data:{'bankcode':bankcode},
                type:'GET',
                dataType:'json',
                success:function(json){                    
                    if(json.result==0){
                        $('.sel_2').addClass('active');
						dataObj = json.datas;
						picker2_data = formatData(dataObj,'docname')
						picker2 = new Picker({
							data: [picker2_data],
							selectedIndex: [0],							
						});	
						picker2Bind();
                    }
					
                }   
            })
		});

		$('.sel_2').on('click',function(){
			var $this = $(this);
			if($this.hasClass('active')){
				 picker2.show();
			}else{
				if($this.find('r').text()!="" || $this.find('r').text() != null){								
					toastShow("请先选择所属银行");									
				}
			}	
		})
		function picker2Bind(){
			picker2.on('picker.select', function (selectedVal, selectedIndex) {			
				var bankname = selectedVal[0];
				var htmlStr = picker2_data[selectedIndex].text;
				$('.sel_2').find('.r').html(htmlStr + ' <i class=" iconfont icon-left"></i>')
				$('.sel_2').data('val',bankname)
				var bankcode = $('.sel_1').data('val')
				$.ajax({
					url:"<?php echo $base_url?>home/card/getcity",
					data:{'bankcode':bankcode,'bankname':bankname},
					type:'GET',
					dataType:'json',
					success:function(jsonp){
						if(jsonp.result==0){
							dataObj = jsonp.datas;
							picker3_data = formatData(dataObj,'city')
							if(picker3_data.length){
								$('.sel_3').addClass('active');	
								$('.sel_3').find('.r').html('<span class="txt">请选择</span> <i class=" iconfont icon-left"></i>')	
								$('.sel_4').find('.r').html('<span class="txt">请选择</span> <i class=" iconfont icon-left"></i>')							
														
								picker3 = new Picker({
									data: [picker3_data],
									selectedIndex: [0],							
								});	
								picker3Bind();
							}else{
								$('.sel_3').find('.r').html("");
								$('.sel_4').find('.r').html("");
								$('.sel_3').removeClass('active');	
							}
							
						}
					}
				})
			});
		}
		function picker3Bind(){			
			picker3.on('picker.select', function (selectedVal, selectedIndex) {			
				var cityname = selectedVal[0];
				var htmlStr = picker3_data[selectedIndex].text;
				$('.sel_3').find('.r').html(htmlStr + ' <i class=" iconfont icon-left"></i>')
				$('.sel_3').data('val',cityname)
				var bankcode = $('.sel_1').data('val')
				var bankname  = $('.sel_2').data('val')
				$.ajax({
					url:"<?php echo $base_url?>home/card/getsubbranch",
					data:{'bankcode':bankcode,'bankname':bankname,'cityname':cityname},
					type:'GET',
					dataType:'json',
					success:function(jsonp)
					{
						console.log(jsonp.datas);
						if(jsonp.result==0){
							dataObj = jsonp.datas;
							picker4_data = formatData2(dataObj)
							if(picker4_data.length){
								$('.sel_4').addClass('active');	
								$('.sel_4').find('.r').html('<span class="txt">请选择</span> <i class=" iconfont icon-left"></i>')							
								picker4 = new Picker({
									data: [picker4_data],
									selectedIndex: [0],							
								});	
								picker4Bind();
							}else{
								$('.sel_4').find('.r').html("")
								$('.sel_4').removeClass('active');	
								
							}							
						}						
					}
				})
			});
		}
		
		function picker4Bind(){
			picker4.on('picker.select', function (selectedVal, selectedIndex) {		
				var id = selectedVal[0];	
				var htmlStr = picker4_data[selectedIndex].text;
				$('.sel_4').find('.r').html(htmlStr + ' <i class=" iconfont icon-left"></i>')
				$('.sel_4').data('val',id)
			});
		}

		$('.sel_3').on('click',function(){
			var $this = $(this);
			if($this.hasClass('active')){
				 picker3.show();
			}else{
				
				if($this.find('r').text()!="" || $this.find('r').text() != null){
					 toastShow("请先选择开户省份");																		
				}
			}	
		})

		$('.sel_4').on('click',function(){
			var $this = $(this);
			if($this.hasClass('active')){
				 picker4.show();
			}else{
				if($this.find('r').text()!="" || $this.find('r').text() != null){				
				 	toastShow("请先选择开户市");			
				}	
			}	
		})
		function formatData(data,val) {
			var newRes = [];
			for (var i = 0; i < data.length; i++) {
				// console.log(data[i]);
				newRes[i] = {};
				newRes[i].value = data[i][val]
				newRes[i].text = data[i][val]
			}
			return newRes;
		}
		
		function formatData2(data){
			var newRes = [];
			for (var i = 0; i < data.length; i++) {
				// console.log(data[i]);
				newRes[i] = {};
				newRes[i].value = data[i].id
				newRes[i].text = data[i].bankname
			}
			return newRes;
		}
        //保存
        $('#save-btn').on('click',function(){
            var username = $('#username').val();//持卡人姓名
            var card = $('#card').val();//卡号
            var subbranch =$('.sel_4').data('val') // $('#subbranch').val();//支行id
            var bankname =$('.sel_2').data('val') // $('.docname').val();//省份名
            var city =$('.sel_3').data('val')// $('.city').val();//城市名
            var bankcode =$('.sel_1').data('val');  // $('#submit').val();//银行code
            if(username =='' || !isNaN(username))
            {
                toastShow('姓名不能为空或者格式不正确');
                return;
            }
            if(card=='' || isNaN(card))
            {
                toastShow('卡号输入不正确 卡号必须是纯数字哦');
                return;
            }  
            if(card.length < 16)
            {
                toastShow('卡号长度不够');
                return;
            }
            if(card.length >20)
            {
            	toastShow('卡号太长');
                return;
            }
           
            if(bankname == '' || city == '' || bankcode == '' || subbranch==undefined)
            {
                toastShow('银行信息填写不完整');
                return false;
            }
            $.ajax({
                url:"<?php echo $base_url?>home/card/addcard",
                data:{'username':username,'card':card,'subbranch':subbranch,'bankname':bankname,'city':city,'bankcode':bankcode},
                type:'POST',
                dataType:'json',
                success:function(resultMsg){
                    if(resultMsg.result==0)
                    {
                        toastShow('添加银行卡信息成功');
                        window.location.href="<?php echo $base_url?>"+'home/card/cardlist';
                    }
                    if(resultMsg.result!=0)
                    {
                        toastShow(resultMsg.errmsg);
                    }
                }
            })
        })
    </script>
</body>
</html>
